/*初始化函数*/
function init() {
    let layer = layui.layer;
    let init_load_index = layer.load(1);
    $.get("/typeInfo", {"token": localStorage.getItem("token")}, function (result) {
        if (result.code === 200) {
            let html_str = "";
            $.each(result.data, function (i, n) {
                html_str += '<tr><td><input type="radio" name="type_id" value="' + n.id + '"></td>';
                html_str += '<td>' + n.name + '</td>';
                html_str += '<td>' + n.blogNumber + '</td>';
                html_str += '<td>' + n.description + '</td></tr>';
            })
            $("#type_list").html(html_str);
        } else if (result.code === 401) {
            window.parent.location.href = "/login.html";
        } else
            layer.msg(result.msg, {icon: 5});
        layer.close(init_load_index);
    })
}


layui.use(['form', 'layer'], function () {
    let form = layui.form, layer = layui.layer;
    // 1.增加按钮
    $("#add_btn").click(function () {
        let add_layer_index = layer.open({
            type: 1,
            title: "增加",
            content: $("#add_edit_layer"),
            closeBtn: 2,
            //anim: 3,
            success: function (layero, index) {
                $("#reset_btn").click();//清空值
                $("div[name='blog_number']").prop("hidden",true);
                $("#add_edit_layer").prop("hidden",false);
            },
            end: function () {
                $("#add_edit_layer").prop("hidden",true).attr("style","");
            }
        })
        // 1.1提交按钮
        form.on('submit(form_submit)', function (data) {
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let insert_load_index = layer.load(1);
            $.post("/type", {
                "token": localStorage.getItem("token"),
                "name": $.trim(data.field.name),
                "description": $.trim(data.field.description)
            }, function (result) {
                layer.close(insert_load_index);
                layer.close(add_layer_index);
                if (result.code === 200) {
                    // 刷新页面即可
                    window.location.reload();
                } else
                    layer.msg(result.msg, {icon: 5});
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

    // 2.修改按钮
    $("#edit_btn").click(function () {
        let $type_checked = $("input[type='radio']:checked");
        if ($type_checked.length !== 1) {
            layer.msg("请选中需要修改的分类", {icon: 5});
            return false;
        }
        let edit_layer_index = layer.open({
            type: 1,
            title: "修改",
            content: $("#add_edit_layer"),
            closeBtn: 2,
            anim: 3,
            success: function (layero, index) {
                edit_init($type_checked.val());//初始化值
                $("#add_edit_layer").prop("hidden",false);
            },
            end: function () {
                $("#add_edit_layer").prop("hidden",true).attr("style","");
            }
        })

        // 2.1提交按钮
        form.on('submit(form_submit)', function (data) {
            //console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            //console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            //console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let update_load_index = layer.load(1);
            $.ajax({
                url: "/type",
                method: "put",
                dataType: "json",
                data: {
                    "token": localStorage.getItem("token"),
                    "type_id": $type_checked.val(),
                    "name": $.trim(data.field.name),
                    "description": $.trim(data.field.description)
                },
                success: function (result) {
                    if (result.code === 200) {
                        // 刷新页面即可
                        window.location.reload();
                    } else
                        layer.msg(result.msg, {icon: 5});
                    layer.close(update_load_index);
                    layer.close(edit_layer_index);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    })

    // 3删除按钮
    $("#delete_btn").click(function () {
        let $type_checked = $("input[type='radio']:checked");
        if ($type_checked.length !== 1) {
            layer.msg("请选中需要删除的分类", {icon: 5});
            return false;
        }
        layer.confirm("确认删除该分类吗？", {icon: 3, title: "警告"}, function (index) {
            let delete_load_index = layer.load(1);
            $.ajax({
                url: "/type",
                method: "delete",
                dataType: "json",
                data: {
                    "token": localStorage.getItem("token"),
                    "type_id": $type_checked.val()
                },
                success: function (result) {
                    if (result.code === 200) {
                        layer.alert("成功删除分类："+result.data.name+"，其下的"+result.data.blogNumber+"篇博客分类将为null",{icon:1},function (index){
                            layer.close(index);
                            //刷新页面即可
                            window.location.reload();
                        })
                    }
                    else
                        layer.msg(result.msg,{icon:5});
                    layer.close(delete_load_index);
                    layer.close(index);
                }
            })
        })
    })

    // 开始初始化
    init();
})

/*获取某个特定type的info
* 并将其赋值到layer中*/
function edit_init(type_id) {
    let edit_load_index = layer.load(1);
    $.get("/typeInfo",
        {
            "token": localStorage.getItem("token"),
            "type_id": type_id
        },
        function (result) {
            if (result.code === 200) {
                $("input[name='name']").val(result.data.name);
                $("input[name='description']").val(result.data.description);
                $("input[name='blog_number']").val(result.data.blogNumber);
                $("div[name='blog_number']").prop("hidden",false);
            } else
                layer.msg(result.msg, {icon: 5});
            layer.close(edit_load_index);
        })
}